<!--折线图-->
<template>
  <div class="node-bar w-full h-full" ref="nodeBarRef"></div>
</template>

<script lang="ts" setup>
import { defineComponent, markRaw, onMounted, onBeforeUnmount, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { sleep } from '@/utils/sleep';
import icon1 from './assets/icon1.png'
import icon2 from './assets/icon2.png'
import icon3 from './assets/icon3.png'
import icon4 from './assets/icon4.png'

defineComponent({ name: 'NodeBarEcharts' });

const props = defineProps({
  echartsData: {
    type: Number,
    default: 0
  }
});

const nodeBarRef = ref();
const myChart = ref<any>(null);

function initEcharts() {
  // 标记一个对象，使其永远不会再成为响应式对象
  myChart.value = markRaw(echarts.init(nodeBarRef.value));
  const list = [
    {
      name: "清洗中",
      value: 56.13,
    },
    {
      name: "已发布",
      value: 21.27,
    },
    {
      name: "待核验",
      value: 12.52,
    },
    {
      name: "已入库",
      value: 10.08,
    },
  ];

  const yName = list.map((item) => item.name);
  const xData = list.map((item) => item.value);
  const barWidth = 14;

  const color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [
    {
      offset: 1,
      color: "#45c9fe",
    },
    {
      offset: 0,
      color: "#2c6ff2",
    },
  ])
  const option = {
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 100,
    },
    yAxis: [
      {
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 70,
          padding: [-30, 0, 0, 0],
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          align: "left",
          rich: {
            img1: {
              width: 54,
              height: 54,
              backgroundColor: { image: icon1 },
            },
            img2: {
              width: 54,
              height: 54,
              backgroundColor: { image: icon2 },
            },
            img3: {
              width: 54,
              height: 54,
              backgroundColor: { image: icon3 },
            },
            img4: {
              width: 54,
              height: 54,
              backgroundColor: { image: icon4 },
            },
            nt: {
              align: "left",
              fontSize: 20,
              padding: [-30, 0, 0, 0],
            },
          },
          formatter: function (value: any, index: number) {
            const num = index + 1;
            return "{img" + num + "|}" + "   {nt|" + yName[index] + "}";
          },
        },
        data: yName,
      },
    ],
    series: [
      {
        //内
        type: "bar",
        barWidth,
        legendHoverLink: false,
        symbolRepeat: true,
        silent: true,
        itemStyle: {
          color: function () {
            return color;
          },
        },
        data: list,
        z: 1,
      },
      {
        // 背景
        type: "pictorialBar",
        animationDuration: 0,
        symbolRepeat: "fixed",
        symbolMargin: "20%",
        symbol: "rect",
        symbolSize: [14, barWidth],
        itemStyle: {
          normal: {
            color: "#1b346f",
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            offset: [180, 46],
            distance: 30,
            textStyle: {
              color: "#fff",
              fontSize: 24
            },
            formatter: function (params: any) {
              return params.data + '%';
            },
          },
        },
        data: xData,
        z: 0,
      },
      {
        //分隔
        type: "pictorialBar",
        itemStyle: {
          color: "#000",
        },
        symbolRepeat: "fixed",
        symbolMargin: 6,
        symbol: "roundRect",
        symbolClip: true,
        symbolSize: [4, barWidth + 1],
        symbolPosition: "start",
        symbolOffset: [0, 0],
        data: list,
        z: 2,
      },
    ],
  };


  myChart.value.setOption(option, true);
  window.addEventListener('resize', () => {
    if (myChart.value) myChart.value.resize();
  });
}

function destroyEcharts() {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
}

onMounted(() => {
  watch(
      () => props.echartsData,
      async () => {
        destroyEcharts();
        await sleep(500);
        if (nodeBarRef.value) initEcharts();
      },
      { immediate: true, deep: true }
  );
});

onBeforeUnmount(() => {
  destroyEcharts();
});
</script>

<style scoped></style>
